<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar">
    <table class="infoPanel">
        <tbody>
        <tr>
            <td>Click on the Cesium display to start.</td>
        </tr>
        <tr>
            <td>w/s - move cutout north/south</td>
        </tr>
        <tr>
            <td>a/d - move cutout west/east</td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer', {
        imageryProvider : Cesium.createTileMapServiceImageryProvider({
            url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
        }),
        baseLayerPicker : false
    });

    var canvas = viewer.canvas;
    canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
    canvas.onclick = function() {
        canvas.focus();
    };

    var scene = viewer.scene;

    var defaultImageryLayerCutout = Cesium.Rectangle.fromDegrees(-90, 20, -70, 40);

    // Cut a rectangle out of the base layer
    var layers = viewer.imageryLayers;
    var imageryBaseLayer = layers.get(0);

    imageryBaseLayer.cutoutRectangle = defaultImageryLayerCutout;

    // Fit a SingleTileImageryProvider inside the cutout on the lowest layer
    layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
        url : './img/igs/Cesium_Logo_overlay.png',
        rectangle : defaultImageryLayerCutout
    }));

    // Add an Earth at Night layer and a "traveling" cutout
    var earthAtNight = layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812 }));
    earthAtNight.cutoutRectangle = Cesium.Rectangle.fromDegrees(-100, 10, -60, 50);
    earthAtNight.alpha = 0.9;

    // "traveling" code
    var flags = {
        moveEast : false,
        moveWest : false,
        moveNorth : false,
        moveSouth : false
    };

    function getFlagForKeyCode(keyCode) {
        switch (keyCode) {
            case 'W'.charCodeAt(0):
                return 'moveNorth';
            case 'S'.charCodeAt(0):
                return 'moveSouth';
            case 'D'.charCodeAt(0):
                return 'moveEast';
            case 'A'.charCodeAt(0):
                return 'moveWest';
            default:
                return undefined;
        }
    }

    document.addEventListener('keydown', function(e) {
        var flagName = getFlagForKeyCode(e.keyCode);
        if (typeof flagName !== 'undefined') {
            flags[flagName] = true;
        }
    }, false);

    document.addEventListener('keyup', function(e) {
        var flagName = getFlagForKeyCode(e.keyCode);
        if (typeof flagName !== 'undefined') {
            flags[flagName] = false;
        }
    }, false);

    var moveIncrement = 0.05;
    viewer.clock.onTick.addEventListener(function(clock) {
        var travelingRectangle = earthAtNight.cutoutRectangle;
        if (flags.moveNorth && travelingRectangle.north + moveIncrement < Cesium.Math.PI_OVER_TWO) {
            travelingRectangle.north += moveIncrement;
            travelingRectangle.south += moveIncrement;
        }
        if (flags.moveSouth && travelingRectangle.south - moveIncrement > -Cesium.Math.PI_OVER_TWO) {
            travelingRectangle.north -= moveIncrement;
            travelingRectangle.south -= moveIncrement;
        }
        if (flags.moveEast) {
            travelingRectangle.east += moveIncrement;
            travelingRectangle.west += moveIncrement;
        }
        if (flags.moveWest) {
            travelingRectangle.east -= moveIncrement;
            travelingRectangle.west -= moveIncrement;
        }
        travelingRectangle.east = wrapLongitude(travelingRectangle.east);
        travelingRectangle.west = wrapLongitude(travelingRectangle.west);
    });

    function wrapLongitude(value) {
        if (value < -Cesium.Math.PI) {
            return value + Cesium.Math.TWO_PI;
        }
        if (value > Cesium.Math.PI) {
            return value - Cesium.Math.TWO_PI;
        }
        return value;
    }



</script>
</body>
</html>